{% extends "analyze_base.html" %}

{% load staticfiles %}
{% block content %}

<script src="{% static 'hchart/highcharts.js' %}"></script>
<script src="{% static 'hchart/modules/exporting.js' %}"></script>

<div id="page-wrapper">

        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">统计图表</h3>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div id="container"></div>
            </div>
        </div>

</div>
{% endblock %}


{% block js %}

    <script>
        $(function () {
            var chart = Highcharts.chart('container', {
                title: {
                    text: '订单混合图表'
                },
                xAxis: {
                    categories: [
                        {% for order in orders %}
                            "订单{{ order.order_id }}"
                        {% endfor %}

                    ]
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                labels: {
                    items: [{
                        html: '订单价格',
                        style: {
                            left: '100px',
                            top: '18px',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                        }
                    }]
                },
                series: [
                    {% for item in items %}
                    {
                    type: 'column',
                    name: '{{ item.name }}',
                    {#订单中的每个商品个数#}
                    data: [3, 2, 1, 3, 4]
                    },
                    {% endfor %}


                {
                type: 'spline',
                name: '平均值',
                data: [
                    {% for order in orders %}
                        {{ order.avg }}
                    {% endfor %}
                ],
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
                }, {
                    type: 'pie',
                    name: '每个订单总的价格',
                    data: [
                        {% for order in orders %}
                            {
                            name: '定单号{{ order.order_id }}',
                            y:{{ order.price }},
                            color: Highcharts.getOptions().colors[{{ order.id }}] // Jane's color
                            }
                        {% endfor %}

                    ],
                    center: [100, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                }]
            });
        })
    </script>

{% endblock %}
